<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <link rel="stylesheet" href="/js/theme/default/style.css" type="text/css" />
    <script src="/js/OpenLayers.js"></script>
    <script type="text/javascript" src="/js/proj4js-combined.js"></script>
    <script type="text/javascript" src="/js/defs/EPSG4326.js"></script>
    <script type="text/javascript" src="/js/defs/EPSG900913.js"></script>
    <script type="text/javascript" src="/js/defs/EPSG28992.js"></script>
    <script type="text/javascript" src="/js/heatmap.js"></script>
    <script type="text/javascript" src="/js/heatmap-openlayers.js"></script>
    <script type="text/javascript">
        function load(){

		var testData = {
			max: 100,
			data: [
				{"lat":120177,"lng":480449,"count":100}
			]
		};

            var mapOptions = {
		projection: new OpenLayers.Projection("EPSG:28992"),
		displayProjection: new OpenLayers.Projection("EPSG:4326"),
		units: 'm',
		maxExtent: new OpenLayers.Bounds(68075.4530926904,136676.673569915,615473.949747968,7342872.23405858),
		};

            	var map = new OpenLayers.Map( 'map', mapOptions );
	    	
		var osm = new OpenLayers.Layer.OSM();
 
		var wms = new OpenLayers.Layer.WMS(
			"WijkenBuurten2009",
			"http://geoservices.cbs.nl/arcgis/services/WijkenBuurten2009/MapServer/WMSServer",
		{
		layers: '0',
		transparent: "true",
		format: "image/png",
		style: 'BEV_DICHTH',
		CRS: 'EPSG:28992',
		version: '1.3.0'},
		{isBaselayer: false});


		var layer = new OpenLayers.Layer.ArcGIS93Rest( "Wijken en Buurten 2009",
                    "http://geoservices.cbs.nl/ArcGis/rest/services/WijkenBuurten2009/MapServer", 
                {layers: "show:2", srs: "28992", TRANSPARENT: true, visible: false},
		{isBaseLayer: false, opacity: 0.5});

		heatmap = new OpenLayers.Layer.Heatmap( 
			"Heatmap Layer", map, osm, 
			{visible: true, radius:10}, {isBaseLayer: false, opacity: 0.3});

		 var heat_loc = new OpenLayers.Layer.Vector("KML", {
                	projection: map.displayProjection,
                	strategies: [new OpenLayers.Strategy.Fixed()],
                	protocol: new OpenLayers.Protocol.HTTP({
                	    url: "data/exporttable.kml",
                	    format: new OpenLayers.Format.KML({
                	        extractStyles: true,
                	        extractAttributes: true
                	    })
                	})
            	});
		//map.addLayers([osm,wms]);
	    	map.addLayers([osm,heat_loc]);

            	map.addControl( new OpenLayers.Control.MousePosition() );
	    	map.addControl(new OpenLayers.Control.Scale());
            	map.addControl(new OpenLayers.Control.LayerSwitcher());

            	map.setCenter(
    		new OpenLayers.LonLat(120177.000,480449.000) // Center of the map
        		.transform(
            	new OpenLayers.Projection("EPSG:28992"), // transform from new RD 
            	map.getProjectionObject()
        	),
    		9); // Zoom level
		map.events.register("mousemove", map, function(e) { 
                	var position = this.events.getMousePosition(e);
                	OpenLayers.Util.getElement("coords").innerHTML = position;
            	});

		heatmap.setDataSet(testData);

        }
        
    </script>
  </head>
  <body onload="load()">
    <h1 id="title">Heatmap Layer test</h1>

    <div id="tags">
    </div>
    <p id="shortdesc">
        testje met heatmap.js
    </p>

    <div id="map" class="smallmap"></div>
    <div id="coords"></div> 
  </body>
</html>




